import SearchComp from "./SearchComp";
import logo from "../../../../imgs/logo.png";
import goodscar from "../../../../imgs/goodscar.png";
import HttpUtils from "../utils/HttpUtils";
import EventEmitterUtils from "../utils/EventEmitterUtils";
import "../../common/css/commheader.css";
import "../../index/zen_init.css";

export default class SearchHeader extends React.Component {
    constructor() {
        super();
        this.state = {
            shopcart_num: 0,
            show_count: false
        };
    }

    componentDidMount() {
        this.shoppingCart();

        EventEmitterUtils.on("updateShopCartNum", () => {
            this.shoppingCart();
        });
    }

    componentWillUnmount() {
        EventEmitterUtils.off("updateShopCartNum");
    }

    shoppingCart() {
        if (!global.hasLogin) {
            const shopCartCount = localStorage.getItem("shopCartCount");
            if (shopCartCount) {
                this.setState({
                    shopcart_num: shopCartCount,
                    show_count: shopCartCount == 0 ? false : true
                });
            }

            return;
        }

        HttpUtils.shoppingCart()
            .then(res => {
                console.log(res);
                this.setState({
                    shopcart_num: res.total,
                    show_count: true
                });
            })
            .catch(err => {
                console.log(err);
            });
    }

    render() {
        const {
            isInSupp,
            clickHighLevel,
            showHighLevel,
            hideHighLevel,
            isInCart,
            isHelpCenter,
            searchTab
        } = this.props;
        const { shopcart_num, show_count } = this.state;

        return (
            <div
                className={
                    isInCart
                        ? "cart-page-content-warpper"
                        : "app-content-warpper"
                }
            >
                <div
                    className={
                        isInCart
                            ? "cart-search-header-box"
                            : "search-header-box"
                    }
                >
                    <div
                        style={{
                            height: isInSupp ? 128 : 150,
                            backgroundColor: "#fff",
                            flex: 1,
                            display: "flex",
                            position: "relative",
                            width: "1200px",
                            marginLeft: "auto",
                            marginRight: "auto"
                        }}
                    >
                        <div
                            onClick={() => {
                                $state.go({
                                    stateName: "/indexPage",
                                    reload:true
                                    
                                });
                                window.location.reload();
                            }}
                            style={{
                                width: 257,
                                height: 47,
                                marginTop: isInSupp ? 42 : 58,
                                cursor: "pointer"
                            }}
                        >
                            <img src={logo} />
                        </div>

                        <SearchComp
                            searchTab={searchTab}
                            isInSupp={isInSupp}
                            isInCart={isInCart}
                            showHighLevel={showHighLevel}
                            clickHighLevel={clickHighLevel}
                            hideHighLevel={hideHighLevel}
                        />
                        {isInCart ? null : (
                            <div
                                onClick={() => {
                                    $state.go({
                                        stateName: "/cart"
                                    });
                                }}
                                className={"search-comps-goods-car"}
                                style={{ marginTop: isInSupp ? 44 : null }}
                            >
                                <div
                                    className={
                                        shopcart_num > 99
                                            ? "search-comps-car-box-99"
                                            : "search-comps-car-box"
                                    }
                                >
                                    <img src={goodscar} alt="" />
                                    <p className={"search-comps-car-box-txt"}>
                                        我的购物车
                                    </p>
                                    {this.renderCountDot(
                                        show_count,
                                        shopcart_num
                                    )}
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        );
    }

    renderCountDot(show_count, shopcart_num) {
        if (show_count) {
            if (shopcart_num <= 99) {
                return <div className={"goods-car-dot"}>{shopcart_num}</div>;
            } else {
                return <div className={"goods-car-dot-99"}>{"99+"}</div>;
            }
            return null;
        }
    }
}
